import React from "react";
import {connect} from "react-redux";

import {getStatistics} from '@/api/home'
import echarts from '@/lib/echarts'

import {Row, Col, Avatar, Progress} from 'antd';
import {UserOutlined, AreaChartOutlined,LineChartOutlined,FundOutlined} from '@ant-design/icons';
import './home.less'

class Home extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            userName: this.props.userName,
            role: this.props.role,
            //统计数据
            statistics: {},
            //折线数据
            data:[150, 230, 224, 218, 135, 147, 260],
            data1:[100, 230, 224, 218, 20,]
        };
        this.echartsInit = this.echartsInit.bind(this)
    }

    //初始化
    echartsInit() {
        const chartDom = document.getElementById('echarDom');
        let myChart = echarts.init(chartDom);

        let option = {
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '上周',
                    type: 'line',
                    stack: '总量',
                    data: this.state.statistics.weekData.last,
            },
                {
                    name: '本周',
                    stack: '总量',
                    type: 'line',
                    data: this.state.statistics.weekData.now,
                }

            ]
        };

        option && myChart.setOption(option);
    }


    //请求数据
    componentDidMount() {
        const obj = {
            uid: this.props.uid
        }
        getStatistics(obj).then(res => {
            if (res.code === 200) {
                this.setState({
                    statistics:res.data
                })

                this.echartsInit()
            }
        })
    }

    render() {
        return (
                <div className='page'>
                    <Row>
                        <Col span={6}>
                            {/* 用户信息 */}
                            <div className='userInfo card'>
                                <div className='flex avatar'>
                                    <Avatar size={100} icon={<UserOutlined/>}/>
                                    <div className='name'>
                                        <h1>{this.state.role}</h1>
                                        <p>用户名称：{this.state.userName}</p>
                                    </div>
                                </div>
                            </div>
                            {/* 用户语言统计 */}
                            <div title="语言详情" className='card' style={{marginTop: 20}}>
                                <div className='title'>
                                    语言详情
                                </div>
                                <div>
                                    <span>Vue</span>
                                    <Progress percent={90}/>
                                </div>
                                <div>
                                    <span>JavaScript</span>
                                    <Progress percent={80}/>
                                </div>
                                <div>
                                    <span>Css</span>
                                    <Progress percent={100}/>
                                </div>
                            </div>
                        </Col>
                        <Col span={12}>
                            <div className='card flex'>
                                <div className='card_item flex'>
                                    <div className='icon'>
                                        <AreaChartOutlined className='icon_calss'/>
                                    </div>
                                    <div className='tongji'>
                                        <span className='txBg'>{this.state.statistics.articleList}</span><br></br>
                                        <span>文章数量</span>
                                    </div>
                                </div>
                                <div className='card_item flex'>
                                    <div className='icon'>
                                        <LineChartOutlined className='icon_calss'/>
                                    </div>
                                    <div className='tongji'>
                                        <span className='txBg'>{this.state.statistics.articleLink}</span><br></br>
                                        <span>文章点赞数</span>
                                    </div>
                                </div>
                                <div className='card_item flex'>
                                    <div className='icon'>
                                        <FundOutlined className='icon_calss'/>
                                    </div>
                                    <div className='tongji'>
                                        <span className='txBg'>{this.state.statistics.collects}</span><br></br>
                                        <span>文章收藏数</span>
                                    </div>
                                </div>
                            </div>

                        {/*    折线图*/}

                                <div id='echarDom' className='card' style={{width:'100%',height:'360px'}}></div>


                        </Col>
                    </Row>
                </div>


        )
    }
}

export default connect((state) => state.user, {}) (Home)